<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品参数</el-breadcrumb-item>
    </el-breadcrumb>
      <!-- 默认级联选择器 -->
    <el-cascader
      class="mt-15"
      :options="options"
      v-model="selectedOptions3"
      :props="props"
      :show-all-levels="false"
      change-on-select
      @change="handleChange"
    ></el-cascader>
    <!-- 标签页 -->
    <el-tabs type="border-card" class="mt-15">
      <el-tab-pane label="动态参数">
        <template>
          <el-button type="success" plain @click="handleAdd">添加参数名称</el-button>
          <!-- 商品表格 -->
          <el-table
           class="mt-15"
            :data="attrData"
            border
            style="width: 100%">
            <el-table-column type="expand">
              <template slot-scope="scope">
                <!-- 展开行 -->
                <el-tag
                  v-for="tag in scope.row.attr_vals.split(' ')"
                  closable
                  :key='tag'>
                 {{tag}}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column
              type="index"
              width="50">
            </el-table-column>
            <el-table-column
              prop="attr_name"
              label="商品参数">
            </el-table-column>
            <el-table-column
              label="操作">
              <template slot-scope="scope">
                <el-button type="primary" icon="el-icon-edit" plain></el-button>
                <el-button type="danger" icon="el-icon-delete" plain @click="handleDel(scope.row)"></el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-tab-pane>
      <el-tab-pane label="静态属性"></el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { getCategories, getAttributes, addAttributes, delAttributes } from '@/api'
export default {
  data () {
    return {
      // 级联选择器数据
      options: [],
      selectedOptions3: [1, 3, 6],
      props: {
        value: 'cat_id',
        label: 'cat_name',
        children: 'children'
      },
      // 表格数据
      attrData: [],
      // 选中分类id
      cartId: 6
    }
  },
  created () {
    this.init()
    this.initParams(6)
  },
  methods: {
    // 初始化级联选择器页面
    init () {
      getCategories(3)
        .then(res => {
          this.options = res.data
          // console.log(res)
        })
    },
    // 初始化参数列表
    initParams (id) {
      getAttributes(id, 'many')
        .then(res => {
          console.log(res)
          this.attrData = res.data
        })
    },
    // 参数根据分类选择修改
    handleChange () {
      // 获取分类id
      this.cartId = parseInt(this.selectedOptions3[this.selectedOptions3.length - 1])
      this.initParams(this.cartId)
    },
    // 添加动态参数
    handleAdd () {
      this.$prompt('参数名称', '添加参数名称', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^[\u4e00-\u9fa5]{0,}$/,
        inputErrorMessage: '参数格式不正确，请输入汉字'
      }).then(({ value }) => {
        addAttributes(this.cartId, value, 'many', 'xxx cds')
          .then(res => {
            console.log(res)
            this.initParams(this.cartId)
          })
        this.$message({
          type: 'success',
          message: '添加参数成功'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        })
      })
    },
    // 删除参数
    handleDel (row) {
      delAttributes(row.cat_id, row.attr_id)
        .then(res => {
          console.log(res)
          this.initParams(row.cat_id)
        })
    }
  }
}
</script>
<style lang="scss" scoped>
  .el-tag {
    margin-right: 10px;
  }
</style>
